@extends('backstage.layout.master')
@section('title', '推送消息')

@section('content')
    <style>
        #img-change {
            cursor: pointer;
            border: 1px solid #000;
            width: 320px;
            height: 200px
        }
    </style>
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try {
                ace.settings.check('breadcrumbs', 'fixed')
            } catch (e) {
            }
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a href="backstage/home">主页</a>
            </li>

            <li class="active">
                推送消息
            </li>
        </ul><!-- .breadcrumb -->
    </div>

    <div class="page-content">
        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div class="page-header">
                    <h1>
                        推送
                        <small>
                            <i class="icon-double-angle-right"></i>
                            推送消息
                        </small>
                    </h1>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="page-content">

                            <form class="form-horizontal" role="form" action="" method="post"
                                  enctype="multipart/form-data">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                        平台: </label>
                                    <div class="col-sm-4">
                                        <select name="platform" id="platform" class="width-50">
                                            <option value ="0">所有</option>
                                            <option value ="1">IOS</option>
                                            <option value ="2">Android</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-5">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                        选择消息模板: </label>
                                    <div class="col-sm-4">
                                        <select name="template_no" id="template_no" class="width-50">
                                            <option value ="1">主题活动</option>
                                            <option value ="2">认证通知</option>
                                            <option value="3">订单</option>
                                            <option value="4">进账通知</option>
                                            <option value="5">提现提醒</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-5">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                        推送消息类型: </label>
                                    <div class="col-sm-4">
                                        <select name="type" id="type" class="width-50">
                                            <option value ="0">链接</option>
                                            <option value ="1">内容无跳转</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-5">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                        推送标题: </label>
                                    <div class="col-sm-4">
                                        <input type="text" name="title" value="" id="title" placeholder="标题"
                                               class="width-100">
                                    </div>
                                    <div class="col-sm-5">
                                    </div>
                                </div>
                                <div class="space-4"></div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                        封面图片: </label>
                                    <div class="col-sm-4">
                                        <input type="file" id="file" name="image" style="display:none;"
                                               onchange="filechange(event)">
                                        <img src="" id="img-change"
                                             alt="点击选择图片" title="点击选择图片">
                                    </div>
                                    <div class="col-sm-5">
                                    </div>
                                </div>
                                <div class="space-4"></div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                        手机通知推送内容: </label>
                                    <div class="col-sm-4">
                                        <textarea name="phone_message" id="phone_message" style="width: 320px;height: 80px;"></textarea>
                                    </div>
                                    <div class="col-sm-5">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                        APP内消息推送内容: </label>
                                    <div class="col-sm-4">
                                        <textarea name="app_message" id="app_message" style="width: 320px;height: 100px;"></textarea>
                                    </div>
                                    <div class="col-sm-5">
                                    </div>
                                </div>
                                <div class="space-4"></div>
                                <div class="space-4"></div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                        跳转URL链接: </label>
                                    <div class="col-sm-4">
                                        <input type="text" name="jump_value" id="jump_value" placeholder="链接"
                                               class="width-100">
                                    </div>
                                    <div class="col-sm-5">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                        推送时间: </label>
                                    <div class="col-sm-4">
                                        <input type="date" id="send_time" name="send_time" class="datepicker width-40"/>
                                        时:
                                        <select name="hour" id="hour" class="width-40">
                                            @for($a = 0; $a < 24; $a++)
                                                <option value="{{$a}}">{{$a}}</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <div class="col-sm-5">
                                    若无需定时推送则无需填写该时间
                                    </div>
                                </div>
                                <div class="space-4"></div>
                                <div class="clearfix form-actions">
                                    <div class="col-md-offset-3 col-md-9">
                                        <button class="btn btn-info submit" type="submit">
                                            <i class="icon-ok bigger-110"></i>
                                            保存
                                        </button>

                                        &nbsp; &nbsp; &nbsp;
                                        <button class="btn" type="reset">
                                            <i class="icon-undo bigger-110"></i>
                                            重置
                                        </button>
                                    </div>
                                </div>
                            </form>

                        </div><!-- /page-content -->
                    </div><!-- col -->
                </div><!-- row -->
            </div><!-- col -->
        </div><!-- row -->
    </div><!-- /.page-content -->

@stop
@section('script')
    <script src="backstage/assets/js/ace-elements.min.js"></script>
    <script src="backstage/assets/js/jquery.colorbox-min.js"></script>
    <script src="backstage/assets/js/jquery.maskedinput.min.js"></script>
    <script src="front/hAdmin/js/plugins/layer/layer.min.js"></script>
    <script>

        $("#img-change").click(function () {
            $("#file").click();
        });
        /*$("#file").change(function (event) {*/
        var filechange = function (event) {
            var files = event.target.files, file;
            if (files && files.length > 0) {
                // 获取目前上传的文件
                file = files[0];// 文件大小校验的动作
                if (file.size > 1024 * 1024 * 2) {
                    alert('图片大小不能超过 2MB!');
                    return false;
                }
                // 获取 window 的 URL 工具
                var URL = window.URL || window.webkitURL;
                // 通过 file 生成目标 url
                var imgURL = URL.createObjectURL(file);
                //用attr将img的src属性改成获得的url
                $("#img-change").attr("src", imgURL);
            }
        };

        $(".submit").click(function () {
            var template_no = $("#template_no").val();
            var type = $("#type").val();
            var title = $("#title").val();
            var file = $("#file").val();
            var phone_message = $("#phone_message").val();
            var app_message = $("#app_message").val();
            var platform = $("#platform").val();
            var jump_value = $("#jump_value").val();
            var send_time = $("#send_time").val();
            if(title.length == 0){
                layer.tips('推送标题不能为空', '#title', {
                    tips: [2, '#FF0509'],
                    time: 3000
                });
                return false;
            }
            if(phone_message.length == 0){
                layer.tips('手机通知推送内容不能为空', '#phone_message', {
                    tips: [2, '#FF0509'],
                    time: 3000
                });
                return false;
            }
            if(app_message.length == 0){
                layer.tips('APP内消息推送内容不能为空', '#app_message', {
                    tips: [2, '#FF0509'],
                    time: 3000
                });
                return false;
            }
            if(template_no == 1 || template_no == 3 || template_no == 4){
                if(file.length == 0){
                    layer.open({
                        skin: 'layui-layer-lan',
                        content: '该消息模板图片不能为空'
                    });
                    return false;
                }
            }
            if(type == 0 && jump_value == ''){
                layer.tips('选择的消息推送类型为链接,链接不能为空', '#jump_value', {
                    tips: [2, '#FF0509'],
                    time: 3000
                });
                return false;
            }
        });
    </script>

@stop
